<template>
    <!-- <el-dialog v-model="state.dialogVisible" v-bind="item.dialogConfig" width="80%" center
        :show-close="false">
        <section class="print-content">
            <slot>
                <span>{{ '请在<AmxxTable> 插槽 <template #print></template> 内编写需要打印的DOM 通过插槽方式传入进来' }}</span>
            </slot>
        </section>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="destroyedComponent()">取消打印</el-button>
                <el-button type="primary" @click="confirmComponent()">确认打印</el-button>
            </span>
        </template>
    </el-dialog> -->
    <el-drawer v-model="state.dialogVisible" :with-header="false" show-close size="60%" :close-on-click-modal="false"
        destroy-on-close>
        <section class="print-main">
            <section class="print-slot" id="print-slot" ref="printSlotRef">
                <div style="display: flex;align-items: center;flex-direction: column;margin-bottom: 10px;"
                     v-for="(item,index) in state.printOptions" :key="index">
                  <div
                      style="padding: 5px;border-top: 2px solid black;width: 100%;text-align: center;border-bottom:2px solid black;margin-bottom: 20px;font-size: 24px ">Pickup Request</div>
                  <div style="font-size: 22px;margin-bottom: 40px;text-align: center">
                    {{ item.deliveryTime }}
                  </div>
                  <div style="font-size: 22px;margin-bottom: 40px;text-align: center">
                    {{ item.lastName }},{{ item.firstName }}
                  </div>
                  <div style="font-size: 22px;margin-bottom: 40px">{{ item.userAddress }},{{ item.userApt }}</div>
<!--                  <div style="font-size: 30px;">{{ item.orderNum }}</div>-->
                  <div style="font-size: 22px;margin-bottom: 20px">{{ item.userCity }},{{ item.continent }},{{ item.zipCode }}</div>
                  <div style="font-size: 22px;margin-bottom: 20px">{{ item.userPhone }}</div>
                  <div style="font-size: 22px;" v-if="item.isUrgent === 1">Urgent</div>
                  <div style="font-size: 22px;">{{ item.remark }}</div>
                </div>
            </section>
<!--            <a class="TO-BOTTOM" @click.prevent="scrollToAnchor('print-slot-footer')">-->
<!--                <el-icon size="24" color="#fff">-->
<!--                    <Bottom />-->
<!--                </el-icon>-->
<!--            </a>-->

            <section class="print-slot-footer" id="print-slot-footer">
                <el-button type="info" @click="destroyedComponent()">CANCEL</el-button>
                <el-button type="primary" @click="confirmComponent()">PRINT</el-button>
            </section>
        </section>
    </el-drawer>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import printJs from 'print-js';
import LOGO from '/@/assets/logo.svg';
interface tablePrintTypes {
    dialogVisible: boolean;
    printOptions: any;
}
// 定义变量内容
const printSlotRef = ref();
const state = reactive<tablePrintTypes>({
    dialogVisible: false,
    printOptions: null,
});

function initComponent(row?: any) {
    state.dialogVisible = true;
    state.printOptions = row;
    console.log(state.printOptions, '打印数据');
}
function destroyedComponent(row?: any) {
    state.dialogVisible = false;
    resetComponent();

}
function resetComponent() {
    state.printOptions = null;
}
function confirmComponent(row?: any) {
    printJs({
        printable: printSlotRef.value,
        type: 'html',

        scanStyles: false,
        style: `@media print{
            .mb10{
                padding-bottom:2mm;
            }
            .mb20{
                padding-bottom:4mm;
            }
            .A4{
                width: 210mm;
                height: 297mm;
            }
            .print-logo {
                width: 20mm;
                height: 20mm;
                disiplay:block;
                position: fixed;
                top: 0mm;
                left: 2mm;
            }
            .mode-header{
                width: 210mm;
                text-align: center;
            }
            .page-desc {
                width: 210mm;
                text-align: center;
            }
            .el-descriptions__label,.desc-text {font-size: 16px;color:#222;}
           

            .table-desc{ width: 210mm }
            .el-descriptions--large .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
                    padding-bottom: 3mm
            }
            .el-button--small i.iconfont{ font-size: 12px !important;margin-right: 5px}
            .el-table { width: 210mm  !important }
            .el-table__body-wrapper { overflow: visible !important}
            .el-table__body { overflow: visible !important }
            }`,
    });

}
defineExpose({
    initComponent,
    destroyedComponent,
    resetComponent,
});
</script>
<style lang="scss">
.print-main {
    width: 100%;
    height: max-content;

    display: flex;
    flex-direction: column;
    padding: 16px 32px;

    .print-slot {
        //height: max-content;
        margin-bottom: 10px;
        &__wrap {
            margin-bottom: 32px;
            position: relative;

            &:last-child {
                margin-bottom: unset;
            }

            .print-logo {
                width: 20mm;
                height: 20mm;
                disiplay: block;
                top: 0mm;
                left: 2mm;
            }
        }

        .mode1 {
            display: flex;
            flex-direction: column;

            .mode-header {
                width: 100%;
                text-align: center;
                margin-bottom: 32px;
            }
        }
    }

    .print-slot-footer {
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .page-desc {
        width: 100%;
        text-align: center;
    }
}



.TO-BOTTOM {
    position: fixed;
    right: 20px;
    bottom: 50px;
    background-color: rgba(0, 0, 0, .3);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: block;
    display: inline-flex;
    text-decoration: none;
    /* 去掉下划线 */
    color: inherit;
    /* 继承父元素的文本颜色 */
    cursor: pointer;
    /* 将鼠标光标改为指针样式 */
    z-index: 999;
}

.el-descriptions--large .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
    padding-bottom: 2mm
}
</style>
